import { useNavigate } from "react-router-dom";
import { Menu } from "antd";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { getUniqueId } from "@/utils/tools.ts";
import { reactCaseList } from "../../siderList.ts";

const iconList = [
  <PieChartOutlined />,
  <DesktopOutlined />,
  <UserOutlined />,
  <TeamOutlined />,
  <FileOutlined />,
];

//根据siderList生成Menu需要的列表
const menuList = reactCaseList.map((item) => {
  return {
    key: getUniqueId(),
    icon: iconList[Math.floor(Math.random() * iconList.length)],
    label: item.label,
    children: item.children?.map((child) => {
      return {
        key: child.path ? `/reactCase${item.path}${child.path}` : getUniqueId(),
        label: child.label,
      };
    }),
  };
});
console.log("Console：右侧侧边栏的列表", menuList);
export default function Sider() {
  const navigate = useNavigate();
  const handleMenuClick = ({ key }: { key: string }) => {
    console.log("click", key);
    key.match(/^\/.*/) && navigate(key);
  };
  return (
    <>
      <Menu
        theme="dark"
        defaultSelectedKeys={["1"]}
        mode="inline"
        items={menuList}
        onClick={handleMenuClick}
      />
    </>
  );
}
